<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2960521_rqz39d8moo.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/topnav.css">
    <link rel="stylesheet" href="css/header.css">
</head>

<body>
    <!-- 顶部导航 开始 -->
    <div class="topnav">
        <div class="container clearfix">
            <ul class="fl topnav-menu">
                <li class="fl"><a href="">小米商城</a></li>
                <li class="fl"><a href="">MIUI</a></li>
                <li class="fl"><a href="">loT</a></li>
                <li class="fl"><a href="">云服务</a></li>
                <li class="fl"><a href="">天星数科</a></li>
                <li class="fl"><a href="">有品</a></li>
                <li class="fl"><a href="">小爱开发平台</a></li>
                <li class="fl"><a href="">企业团购</a></li>
                <li class="fl"><a href="">资质证照</a></li>
                <li class="fl"><a href="">协议规则</a></li>
                <li class="fl"><a href="">下载app</a></li>
                <li class="fl"><a href="">智能生活</a></li>
                <li class="fl"><a href="">Select Location</a></li>
            </ul>
            <div class="fr">
                <!-- 登录、注册、消息通知 -->
                <ul class="topnav-menu fl">
                    <li class="fl"><a href="">登录</a></li>
                    <li class="fl"><a href="">注册</a></li>
                    <li class="fl"><a href="">消息通知</a></li>
                </ul>
                <!-- 购物车 -->
                <div class="fl topnav-car">
                    <a class="topnav-link" href="">
                        <i class="iconfont i-car"></i>
                        <span>购物车(0)</span>
                    </a>
                    <div class="topnav-detail">购物车还没有商品，赶紧选购吧</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 顶部导航 结束 -->

    <!-- 页头 开始 -->
    <div class="header">
        <div class="container clearfix">
            <a href="" class="header-logo fl">

            </a>
            <div class="header-menu fl">
                <a class="fl" href="">小米手机</a>
                <a class="fl" href="">红米手机</a>
                <a class="fl" href="">电视</a>
                <a class="fl" href="">笔记本</a>
                <a class="fl" href="">平板</a>
                <a class="fl" href="">家电</a>
                <a class="fl" href="">路由器</a>
                <a class="fl" href="">服务</a>
                <a class="fl" href="">社区</a>
                <!-- 二级菜单 -->
                <div class="header-submenu">
                    <div class="container clearfix">
                        <a href="" class="fl">
                            <div class="header-cover">
                                <img src="./img/product.webp" alt="">
                            </div>
                            <div class="header-name">Redmi Note 11 5G</div>
                            <div class="header-price">1199元起</div>
                        </a>
                        <a href="" class="fl">
                            <div class="header-cover">
                                <img src="./img/product.webp" alt="">
                            </div>
                            <div class="header-name">Redmi Note 11 5G</div>
                            <div class="header-price">1199元起</div>
                        </a>
                        <a href="" class="fl">
                            <div class="header-cover">
                                <img src="./img/product.webp" alt="">
                            </div>
                            <div class="header-name">Redmi Note 11 5G</div>
                            <div class="header-price">1199元起</div>
                        </a>
                        <a href="" class="fl">
                            <div class="header-cover">
                                <img src="./img/product.webp" alt="">
                            </div>
                            <div class="header-name">Redmi Note 11 5G</div>
                            <div class="header-price">1199元起</div>
                        </a>
                        <a href="" class="fl">
                            <div class="header-cover">
                                <img src="./img/product.webp" alt="">
                            </div>
                            <div class="header-name">Redmi Note 11 5G</div>
                            <div class="header-price">1199元起</div>
                        </a>
                        <a href="" class="fl">
                            <div class="header-cover">
                                <img src="./img/product.webp" alt="">
                            </div>
                            <div class="header-name">Redmi Note 11 5G</div>
                            <div class="header-price">1199元起</div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 搜索区域 -->
        </div>
    </div>
    <!-- 页头 结束 -->

    <div style="background-color: red; height: 500px; position:relative"></div>
</body>

</html>